<script setup>
import {useRouter} from 'vue-router';
import {ref} from 'vue';
import {portalLoginUserGet, isLogin, portalDoLogin, portalDoRegister} from '@/api/portalAuthApi.js';
import {message} from 'ant-design-vue';
import {clearPortalLocalData} from '@/utils/authUtils.js';
import {loading} from '@/utils/loadingUtils.js';


import webicon from '@/assets/web-icon.png'

import {navItem, webName} from '@/config/headerConfig.js';


const router = useRouter()
const showDia = ref(false)
const userInfo = ref(undefined)

let userInfoLocal = JSON.parse(localStorage.getItem('PORTAL_USER_INFO'))

if (userInfoLocal) {
  userInfo.value = userInfoLocal
}

const formRef = ref(null)

const form = ref({
  username: '',
  password: '',
  repeatPassword: '',
  phoneNum: ''
})

function closeLoginForm() {
  showDia.value = false
  formRef.value.resetFields()
}

const handleLogin = () => {
  portalDoLogin(form.value).then(res => {
    message.success('登录成功')
    localStorage.setItem('PORTAL_TOKEN', res);
  }).then(() => {
    portalLoginUserGet().then(res => {
      localStorage.setItem('PORTAL_USER_INFO', JSON.stringify(res))
    }).then(() => {
      window.location.reload()
    }).finally(() => closeLoginForm())
  })
}

const handleRegister = () => {
  if (form.value.password !== form.value.repeatPassword) {
    message.error('两次密码需一致')
    return;
  }
  portalDoRegister(form.value).then(() => {
    message.success('注册成功')
    closeLoginForm()
  })
}


function doPortalLoginOrRegister() {
  if (type === 1) {
    handleLogin()
  } else if (type === 2) {
    handleRegister()
  }
}

function portalLogOut() {
  clearPortalLocalData()
  router.push('/portal')
  location.reload()
}

let type = 1

function goLogin() {
  type = 1
  showDia.value = true
  //loginCard.value.switchCard()
}

function goRegister() {
  type = 2
  showDia.value = true
}

const goNav = async (navItem) => {
  if (navItem.login) {
    message.error('请先登录')
    await isLogin()
  }
  await router.push(navItem.path)
}


</script>

<template>
  <!--<login-card ref="loginCard"></login-card>-->


  <nav class="bg-white shadow">
    <div class=" mx-auto w-[80%]  px-3 py-3 flex items-center justify-between">
      <div @click="() => router.push('/portal')" class="w-1/4  cursor-pointer flex  items-center space-x-2">
        <div class="w-16">
          <img class="w-full h-full" :src="webicon" alt="">
        </div>
        <span class="text-2xl font-medium font-NotoSerif">
          {{ webName }}
        </span>
      </div>
      <div class="ml-20 w-1/2 justify-center   flex space-x-5 webNav">
        <div @click="() => router.push('/portal')"
             class="flex items-center   font-Noto space-x-1 hover:text-blue-500 cursor-pointer transition">
          <span class="material-symbols-outlined text-xl text-gray-900 ">home</span>
          <span class=" text-blue-gray-900"

          >首页</span>

        </div>

        <div v-for="item in navItem" @click="goNav(item)"
             class="flex items-center  space-x-1 font-Noto hover:text-blue-500 cursor-pointer transition">
          <span class="material-symbols-outlined text-xl">{{ item.icon }}</span>
          <span class="text-blue-gray-900">{{ item.name }}</span>
        </div>
      </div>

      <div v-if="userInfo" class="ml-5 flex justify-end w-1/4  ">
        {{ userInfo.username }} | <span class="ml-2 hover:text-blue-500 cursor-pointer transition" @click="portalLogOut">退出</span>
      </div>

      <div v-else class="flex justify-end w-1/4 items-center gap-x-1">
        <button
            class="hidden px-4 py-2 font-sans text-xs font-bold text-center text-gray-900 uppercase align-middle transition-all rounded-lg select-none hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none lg:inline-block"
            type="button">
          <span @click="goLogin">登录</span>
        </button>
        <button
            class="hidden select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none lg:inline-block"
            type="button">
          <span @click="goRegister">注册</span>
        </button>
      </div>

      <!--      <div v-if="false"  class="ml-5  flex justify-end w-1/4  ">-->
      <!--        <span class="hover:text-blue-500 cursor-pointer transition" @click="goLogin">登录</span>-->
      <!--        <span class="mx-2">|</span>-->
      <!--        <span class="hover:text-blue-500 cursor-pointer transition" @click="goRegister">注册</span>-->
      <!--      </div>-->
    </div>
  </nav>


  <a-modal :confirm-loading="loading" @ok="doPortalLoginOrRegister" @close="closeLoginForm" width="400px"
           v-model:open="showDia">
    <div class="p-4 mt-6">
      <a-form :label-col="{
        style: {
          width: '80px'
        }
      }" ref="formRef" :model="form">
        <a-form-item
            label="用户名"
            name="username"
            :rules="[{required: true, message:'请输入用户名'}]">
          <a-input
              placeholder="请输入用户名"
              v-model:value="form.username"></a-input>
        </a-form-item>

        <a-form-item
            label="手机号码"
            v-if="type === 2"
            name="phoneNum"
            :rules="[{required: true, message:'请输入手机号码'}]">
          <a-input
              placeholder="请输入手机号码"
              v-model:value="form.phoneNum"></a-input>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{required: true, message:'请输入密码'}]">
          <a-input
              placeholder="请输入密码"
              v-model:value="form.password"></a-input>
        </a-form-item>
        <a-form-item
            v-if="type === 2"
            label="确认密码"
            name="password"
            :rules="[{required: true, message:'请输入密码'}]">
          <a-input
              placeholder="请再次确认密码"
              v-model:value="form.repeatPassword"></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style scoped>
.webNav {

}
</style>
